{extend name="public/layout" /}
{block name="head"}
<script src="//cdn-go.cn/cdn/vod-js-sdk-v6/latest/vod-js-sdk-v6.js"></script>
{/block}
{block name="body"}
<body>
<div class="container-fluid p-t-15">
  <div class="card">
    <div class="card-header">
      <h4>视频上传</h4>
    </div>
    <div class="card-body">
      <div class="form-horizontal">
        <div class="form-group">
          <label class="col-sm-2 control-label">视频分类</label>
          <div class="col-sm-6">
            <select class="form-control" id="class-id">
              <option value="">==视频分类==</option>
              {volist name="cate" id="vo"}
              <option value="{$vo.id}">{$vo._name}</option>
              {/volist}
            </select>
          </div>
        </div>
        <div class="form-group">
          <label class="col-sm-2 control-label">上传视频</label>
          <div class="col-sm-10">
            <div class="upload">
              <div class="upload-type">
                <input type="file" style="display:none;" id="cover-file"
                       accept="image/png,image/gif,image/jpeg,image/jpg" />
                <input type="file" style="display:none;" id="vod-file" multiple
                       accept=".mp4,.ts,.flv,.wmv,.asf,.rm,.rmvb,.mpg,.mpeg,.3gp,.mov,.webm,.mkv,.avi,.mp3,.m4a,.flac,.ogg,.wav" />
                <button id="vod-select" class="btn btn-info" onclick="$('#vod-file').click()">
                  <i class="mdi mdi-video"></i> 选择视频
                </button>
                支持 WMV、RM、MOV、MPEG、MP4、3GP、FLV、AVI、RMVB 等格式批量上传
              </div>
              <table class="table table-bordered m-t-10">
                <tr>
                  <th style="width:80px;">视频封面</th>
                  <th style="width:260px;">文件名称</th>
                  <th style="width:160px">视频大小</th>
                  <th style="width:260px;">视频名称</th>
                  <th style="width:280px;">进度</th>
                  <th style="width:60px">操作</th>
                </tr>
                <tbody id="vod-list">

                </tbody>
              </table>
            </div>
          </div>
        </div>
        <div class="form-group">
          <div class="col-sm-10 col-sm-offset-2">
            <button id="vod-upload" class="btn btn-primary" disabled>
              <i class="mdi mdi-cloud-upload"></i> 开始上传
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<script type="text/html" id="vod-list-tpl">
  {@if vodFiles.length>0}
    {@each vodFiles as video,index}
    <tr data-index="${index}" class="tr-${index}">
      <td>
        <img class="select-cover cover-${index}" data-index="${index}" src="/static/system/images/default-cover.png" style="width:68px;height:38px;" />
      </td>
      <td>${index}:${video.name}</td>
      <td>${video.size|renderSize}</td>
      <td>
        <input type="text" class="form-control input-vod-title" name="file[i].title" value="${video.title}" />
      </td>
      <td>
        <div class="progress">
          <div class="progress-bar progress-${index}" aria-valuemin="0" aria-valuemax="100">0%</div>
        </div>
      </td>
      <td>
        <div class="del-${index}">
          <a href="javascript:void(0);" class="del-file"><i class="mdi mdi-close-circle fa-1-5x text-gray"></i></a>
        </div>
      </td>
    </tr>
    {@/each}
  {@/if}
</script>
<script>
  function getSignature() {
    var classId = $('#class-id').val();
    return $.post('/system/vod.upload/sign.html',{ class_id:classId },function (res) {
      return res;
    });
  }
  var body = $('body');
  var uploadStatus = 0;
  var vodFiles = []; //选择的视频列表
  var tcVod = null; //vod对象
  var uploader = []; //上传对象
  var currentCoverIndex = null; //当前封面
  var covers = []; //封面对象
  var uploadFileNum = 0; //已经上传文件数量
  var cancleFileNum = 0; //放弃上传文件数量
  var $vodUpload = $('#vod-upload');
  var $vodSelect = $('#vod-select');
  //选择封面
  body.on('click','.select-cover',function () {
    currentCoverIndex = $(this).data('index');
    if(uploadStatus!=0 || typeof uploader[currentCoverIndex] == 'object'){
      layer.msg('上传中不允许更换封面');
      return false;
    }
    $('#cover-file').click();
  });
  $('#cover-file').change(function (e) {
    var reader=new FileReader();
    reader.onload=function(){
      $('.cover-'+currentCoverIndex).attr('src',reader.result);
    };
    reader.readAsDataURL(this.files[0]);
    covers[currentCoverIndex] = this.files[0];
  });
  //选择视频
  $('#vod-file').change(function (e) {
    var files = e.target.files || e.dataTransfer.files;
    if(files.length==0) alert("请选择视频文件");
    for (var i=0; i<files.length; i++) {
      var file = files[i];
      if (file.constructor == File) {
        var index = _.findIndex(vodFiles, { 'name': file.name, 'size': file.size });
        if(index==-1){
          file.title = file.name;
          vodFiles.push(file);
        }
      }
    }
    $(this).val(""); //清空选择框
    doAction.juicer();
  });
  //修改视频标题
  body.on('blur','.input-vod-title',function () {
    var trObj = $(this).closest('tr');
    var fileIndex = trObj.data('index'); //文件索引
    vodFiles[fileIndex]['title'] = $(this).val();
  });
  //删除选择视频
  body.on('click','.del-file',function () {
    var trObj = $(this).closest('tr');
    var fileIndex = trObj.data('index'); //文件索引
    if(typeof uploader[fileIndex]=='undefined'){
      _.pullAt(vodFiles, fileIndex);
      _.pullAt(covers, fileIndex); //封面删除
      doAction.juicer();
    }else{
      uploader[fileIndex].cancel(); //取消上传
      cancleFileNum+=1;
      $('.tr-'+fileIndex).remove();
      doAction.activeUploadBtn();
    }
  });
  //上传视频
  body.on('click','#vod-upload',function () {
    if(vodFiles.length==0) alert('请选择视频文件');
    $vodUpload.attr('disabled',true);
    $vodSelect.attr('disabled',true);
    $('.input-vod-title').attr('disabled',true);
    uploadStatus = 1;
    const tcVod = new TcVod.default({
      getSignature: getSignature //获取上传签名的函数
    });
    for(let i=0;i<vodFiles.length;i++){
      let file = vodFiles[i];
      let progress = $('.progress-'+i);
      let uploadObj = { mediaFile: file, mediaName: file.title };
      if(typeof covers[i] == 'object'){
        uploadObj.coverFile = covers[i];
      }
      uploader[i] = tcVod.upload(uploadObj);
      uploader[i].on('media_progress', function (info) {
        var width = (info.percent*100).toFixed(0);
        progress.attr('aria-valuenow',width).css('width',width+'%').text(width+'%');
      });
      uploader[i].on('media_upload', function (info) {
        uploadFileNum += 1;
        $('.del-'+i).html('<i class="mdi mdi-check-circle fa-1-5x text-success"></i>');
        doAction.activeUploadBtn();
      });
    }
  });
  var doAction = {
    //解析附件模板
    juicer:function () {
      if(vodFiles.length>0){
        $('#vod-upload').attr('disabled',false);
      }else{
        $('#vod-upload').attr('disabled',true);
      }
      var html = juicer($('#vod-list-tpl').html(),{vodFiles:vodFiles});
      $('#vod-list').html(html);
    },
    activeUploadBtn:function () {
      if((uploadFileNum+cancleFileNum)==vodFiles.length){
        uploadStatus = 0;
        vodFiles = [];
        covers = [];
        uploadFileNum = 0;
        cancleFileNum = 0;
        $vodUpload.attr('disabled',false);
        $vodSelect.attr('disabled',false);
      }
    }
  };
</script>
</body>
{/block}